<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#nav{
				height: 50px;
				background: black;
				
			}
			a{
				text-decoration: none;
				color: white;
				line-height: 50px;
				margin-left: 15px;
			}
			#nav1{
				float: right;
			}
			input{
				width: 300px;
				height: 50px;
				margin-top: 10px;
				font-size: 25px;
			}
	        button{
	        	width: 304px;
	        	height: 50px;
	        	line-height: 50px;
	        	text-align: center;
	        	background: blue;
	        	outline: none;
	        	border: none;
	        	margin-top: 10px;
	        	color: white;
	        }
	        #dlogin{
	        	display: none;
	        	text-align: center;
	        }
		</style>
	</head>
	<body>
		<div id="nav">
			<div id="nav1">
				<a href="javascript:;" id="my">登录</a>
			    <a href="javascript:;">注册</a>
			</div>
		</div>
		<div id="dlogin">
			<p><input type="text" id="userName" /></p>
			<p><input type="password" name="pwd" id="pwd" value="" /></p>
			<p><button onclick="mylogin()">登录</button></p>
		</div>
	</body>
	<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
	<script type="text/javascript" src="layer/layer.js"></script>
	<script type="text/javascript">
		$('#my').click(function(){
			layer.open({//打开一个界面
		   	  type:1,//有1-5种类型，1是页面层
		   	  title:'登录界面',//标题的内容
		   	  maxmin:true,//最大化
		   	  area:['400px','260px'],//设置窗口的宽高
		   	  content:$('#dlogin'),//内容是我们写好的html找到这个对象都可以
		   })
		})
		function mylogin(){
			var user=$.trim($('#userName').val());
			var pwd=$.trim($('#pwd').val());
			if(user==""||pwd==""){
				layer.msg('用户名和密码不能为空',{
					time:2000,//设置窗口显示的时间
					icon:5//哭脸图标
				});
			}else{
				if(user=='admin'&&pwd=='123'){
					layer.msg('登录成功',{
						time:2000,
						icon:6//笑脸图标
					},function(){
						layer.closeAll();//成功之后关闭窗口
						location.href='https://www.baidu.com/'
					})
				}else{
					layer.msg('用户名密码错误',{
						time:2000,
						icon:5
					})
				}
			}
		}
	</script>
</html>
